---
title: Tailwind CSS
description: A step-by-step guide for installing and configuring Tailwind CSS v4 in Redwood SDK projects, including customization options and font integration techniques.
---

import { Aside } from "@astrojs/starlight/components";
import { Steps } from "@astrojs/starlight/components";

import { PackageManagers } from "starlight-package-managers";

## Installing Tailwind

Since the RedwoodSDK is based on React and Vite, we can work through the ["Using Vite" documentation](https://tailwindcss.com/docs/installation/using-vite).

<Steps>

1.  Install Tailwind CSS

    <PackageManagers pkg="tailwindcss @tailwindcss/vite" />

2.  Configure the Vite Plugin
    {" "}

    ```ts ins={2, 7-9, 15} title="vite.config.mts"
    import { defineConfig } from "vite";
    import tailwindcss from "@tailwindcss/vite";
    import { redwood } from "rwsdk/vite";
    import { cloudflare } from "@cloudflare/vite-plugin";

    export default defineConfig({
      environments: {
        ssr: {},
      },
      plugins: [
        cloudflare({
          viteEnvironment: { name: "worker" },
        }),
        redwood(),
        tailwindcss()
      ],
    });
    ```

          <Aside type="note" title="Environment Configuration">

    Tailwindcss currently uses [the non-deprecated internal `createResolver()` vite API method.](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-vite/src/index.ts#L22) [The code and its docstring indicate that it relies on an `ssr` being present](https://github.com/vitejs/vite/blob/c0e3dba3108e479ab839205cfb046db327bdaf43/packages/vite/src/node/config.ts#L1498).

    This isn't the case for us, since we only have a `worker` environment instead of `ssr`. To prevent builds from getting blocked on this, we stub out the ssr environment here.

          </Aside>

3.  Create a `src/app/styles.css` file, and import Tailwind CSS

    ```css ins={1} title="src/app/styles.css"
    @import "tailwindcss";
    ```

4.  Import your CSS and add a `<link>` to the `styles.css` file.<br />
    In the `Document.tsx` file, within the `<head>` section, add:

    ```tsx title="src/app/Document.tsx" add={1, 5}
    import styles from "./styles.css?url";
    ...
    <head>
      ...
      <link rel="stylesheet" href={styles} />
      ...
    </head>
    ```

5.  To test that Tailwind is working, you'll need to style something in your app. Use the <a href="https://tailwindcss.com/docs/styling-with-utility-classes" target="_blank">Tailwind CSS docs</a> to understand how to use the utility classes.<br />
    For example, you can just pick a random element in your app and add a blue background color to it by adding `className="bg-blue-500"` to it.`

6.  Now, you can run `dev` and the element you styled should look different.
    <PackageManagers type="run" args="dev" />

</Steps>

## Customizing TailwindCSS

With Tailwind v4, there is no longer a `tailwind.config.js` file for customizations. Instead, we use the `styles.css` file.

All of your customizations should be within a `@theme` block.

```css
@import "tailwindcss";
@theme {
  --color-bg: #e4e3d4;
}
```

Now, this custom color can be used:

```tsx
<div className="bg-bg">
  <h1>Hello World</h1>
</div>
```

## Further reading

- [TailwindCSS](https://tailwindcss.com/)
- [VS Code, Tailwind CSS IntelliSense Plugin](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
